<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lib/css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap.maizi.css">
</head>

<body>
    <!-- 导航 -->
    <nav class="nav navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand">MaiZi Admin</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav ">
                    <!-- active 选中效果 -->
                    <li class="active"><a href="index.html">
                            <spna class="glyphicon glyphicon-home">&nbsp;</spna>
                            后台首页
                        </a></li>
                    <li><a href="user_list.html">
                            <spna class="glyphicon glyphicon-user">&nbsp;</spna>用户管理
                        </a></li>
                    <li><a href="content.html">
                            <spna class="glyphicon glyphicon-list-alt">&nbsp;</spna>内容管理
                        </a></li>
                    <li><a href="tag.html">
                            <spna class="glyphicon glyphicon-tag">&nbsp;</spna>
                            标签管理
                        </a></li>

                </ul>
                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">
                        <a class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="true">
                            admin
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;前台首页</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;个人主页</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;个人设置</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;账户中心</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;我的收藏</a></li>
                        </ul>
                    </li>
                    <li><a href="#">
                            <spna class="">&nbsp;</spna>
                        </a></li>
                    <li><a href="#">
                            <spna class="glyphicon glyphicon-off">&nbsp;</spna>退出
                        </a></li>


                </ul>
            </div>
        </div>


    </nav>
    <!-- 导航 -->

    <div class="container">
        <div class="row">
            <!-- 警告框 -->
            <div class="col-md-12">
                <div class="alert alert-danger alert-dismissible fade in" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4>网站程序有漏洞,急需修复!</h4>
                    <p>当前版本程序(V1.22)存在严重安全问题,容易造成攻击,请及时修复!</p>
                    <p>
                        <button type="button" class="btn btn-danger">立即修复</button>
                        <button type="button" class="btn btn-default " data-dismiss="alert">稍后处理</button>
                    </p>
                </div>
            </div>
            <!-- 警告框 -->
            <!-- 网站数据统计 -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">网站数据统计</div>
                    <div class="panel-body">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>统计项目</th>
                                    <th>今日</th>
                                    <th>昨日</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>注册会员</th>
                                    <td>200</td>
                                    <td>400</td>
                                </tr>
                                <tr>
                                    <th>登录会员</th>
                                    <td>420</td>
                                    <td>540</td>
                                </tr>
                                <tr>
                                    <th>今日发帖</th>
                                    <td>600</td>
                                    <td>630</td>
                                </tr>
                                <tr>
                                    <th>转载次数</th>
                                    <td>70</td>
                                    <td>40</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
            <!-- 网站数据统计-->
            <!-- 网站热帖 -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">网站热帖</div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <a href="">
                                <spna class="glyphicon glyphicon-list-alt">&nbsp;</spna>泛Mooc职业教育,效果和就业为王 <small
                                    class="pull-right">2015/8/10</small>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="">
                                <spna class="glyphicon glyphicon-list-alt">&nbsp;</spna>泛Mooc职业教育,效果和就业为王 <small
                                    class="pull-right">2015/8/10</small>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="">
                                <spna class="glyphicon glyphicon-list-alt">&nbsp;</spna>泛Mooc职业教育,效果和就业为王 <small
                                    class="pull-right">2015/8/10</small>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="">
                                <spna class="glyphicon glyphicon-list-alt">&nbsp;</spna>泛Mooc职业教育,效果和就业为王 <small
                                    class="pull-right">2015/8/10</small>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="">
                                <spna class="glyphicon glyphicon-list-alt">&nbsp;</spna>泛Mooc职业教育,效果和就业为王 <small
                                    class="pull-right">2015/8/10</small>
                            </a>
                        </li>
                        <li class="list-group-item">
                            <a href="">
                                <spna class="glyphicon glyphicon-list-alt">&nbsp;</spna>泛Mooc职业教育,效果和就业为王 <small
                                    class="pull-right">2015/8/10</small>
                            </a>
                        </li>
                    </ul>
                </div>
            </div> &nbsp;
            <!-- 网站热帖-->
            <!-- 统计图标 -->
            <div class="col-md-6 ">
                <div class="panel panel-default">
                    <div class="panel-heading">今日访客统计</div>
                    <div class="panel-body">
                        <canvas id="canvas" class="col-md-12" width="760" height="358"></canvas>
                    </div>
                </div>
            </div>
            <!-- 统计图标 -->
            <!--  -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class=" panel-heading">统计图标</div>
                    <div class="panel-body">
                        <p>内存使用率:40%</p>
                        <div class="progress">
                            <!--  progress-bar-striped 条纹  -->
                            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
                                style="width: 20%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <p>数据库使用率:20%</p>
                        <div class="progress">
                            <div class="progress-bar  progress-bar-success progress-bar-striped" role="progressbar"
                                style="width: 60%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <p>磁盘使用率:60%</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar"
                                style="width: 60%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <p>CPU使用率:80%</p>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-danger" role="progressbar "
                                style="width: 80%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="col-md-12  ">
                <div class="panel panel-default">
                    <div class="panel-heading">团队留言板</div>
                    <div class="panel-body">
                        <div class="col-md-7">
                            <!-- well 背景墙  -->
                            <div class="media well">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object wh64" src="img/a.png" alt="卓大哥">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">卓大哥</h4>
                                    <p>技术大哥,今晚请把网站程序升级一下哈,现在程序有漏洞,安全起见!</p>
                                </div>
                            </div>
                            <div class="media well"> 
                                <!-- text-right 文字右显示 -->
                                <div class="media-body text-right">
                                    <h4 class="media-heading">技术王</h4>
                                    <p>收到,今晚凌晨2点准时升级!</p>
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object wh64" src="img/i.png" alt="技术王">
                                    </a>
                                </div>
                     
                            </div>
                            <div class="media well">
                                <div class="media-body text-right">
                                    <h4 class="media-heading">技术王</h4>
                                    <p>你先在站点发布一下通知哈!</p>
                                </div>
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object wh64" src="img/i.png" alt="技术王">
                                    </a>
                                </div>
                        
                            </div>
                            <div class="media well" >
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object wh64" src="img/a.png" alt="卓大哥">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">卓大哥</h4>
                                    <p>好的!</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <form action="#">
                                <div class="form-group">
                                    <label for="text1">输入留言内容</label>
                                    <textarea class="form-control" name="" id="text1" cols="10" rows="5" placeholder="请输入留言内容"></textarea>
                                    <button type="submit" class="btn btn-default mar-t15">留言</button>
                                </div>
                            </form>
                            <div class="panel panel-default">
                                <div class="panel-heading">团队联系手册</div>
                                <div class="panel-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">站长(李小龙):&nbsp;<span class="glyphicon glyphicon-phone"></span>&nbsp;13132828615</li>
                                        <li class="list-group-item">技术(大牛哥):&nbsp;<span class="glyphicon glyphicon-phone"></span>&nbsp;13456127694</li>
                                        <li class="list-group-item">推广(张二哥):&nbsp;<span class="glyphicon glyphicon-phone"></span>&nbsp;13457815482</li>
                                        <li class="list-group-item">客服(王女士):&nbsp;<span class="glyphicon glyphicon-phone"></span>&nbsp;13134567782&nbsp;&nbsp; <span class="glyphicon glyphicon-phone-alt"></span>&nbsp;028-888888</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

     <!-- footer -->
     <footer class="container text-center">
        <div class="row">
            <div class="col-md-12">Copyrigh&nbsp; © &nbsp;2012-2015&nbsp; www.maiziedu.com &nbsp; 蜀ICP备13014370号-4</div>
        </div>
    </footer>
    <!-- footer -->


    <script src="lib/js/jquery-3.4.1.js"></script>
    <script src="lib/js/popper.js"></script>
    <script src="lib/js/bootstrap.js"></script>
    <script src="lib/js/Chart.js"></script>
    <script src="lib/js/script.js"></script>
</body>

</html>